<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script>
        // 创建ajax对象
        var xhr = new XMLHttpRequest();
        // 兼容
        function createXHR() {
            let xhr = null;
            if (window.XMLHttpRequest) {
                xhr = new XMLHttpRequest();
            } else if (window.ActiveXObject) {
                // IE 6 以及以下版本
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            } else {
                alert('您的浏览器不支持ajax请求');
            }
            return xhr;
        }

        // ------------------------------------------------------

        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
            // readyState 发生改变时会自动调用此函数
            // console.log('readyState:', xhr.readyState);
            if(xhr.readyState == 4 && xhr.status == 200){
                // 正常在此情况下才能获取到完整的响应数据
                console.log('onreadystatechange-responseText:', JSON.parse(xhr.responseText));
                // 拿到数据之后, 执行DOM等操作
            }
        }
        xhr.onload = function(){
            // readyState = 4 时会自动调用此函数
            if(xhr.status == 200){
                // 正常在此情况下才能获取到完整的响应数据
                console.log('onload-responseText:', JSON.parse(xhr.responseText));
                // 拿到数据之后, 执行DOM等操作
            }
        }
        // 建立与服务器的连接
        var method = "post";// get, post
        // get请求的参数在地址上 加?, 然后 以 key=val&key=val 的方式追加
        var params = "msg=test";
        // var url = "/ajax/day01/getData1.php?" + params;// 请求地址
        var url = "/ajax/day01/getData1.php";// 请求地址
        var async = true;// 是否是异步, 默认为true
        xhr.open(method, url, async);

        // 使用 post 请求 传递参数, 必须设置请求头, 通常设置如下
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        // 必须在 send 之前设置
        // xhr.responseType = "json";

        // 发送请求, 可以携带参数, 只适用post请求, 参数格式和 get相同: key=val&key=val
        xhr.send(params);
        console.log("xhr.send...........");
        // 模拟请求响应结束
        // setTimeout(()=>{
        //     // console.log('response', xhr.response);
        //     console.log('responseText:', JSON.parse(xhr.responseText));
        // }, 1000);

    </script>

</head>
<body>
    <button onclick="console.log(Math.random());" >Math</button>

    <form action="https://www.baidu.com/s" method="get">
        <input type="text" name="wd" >
        <br>
        <input type="text" name="pwd" >
        <br>
        <input type="submit" value="百度一下" >
    </form>

</body>
</html>